<template>
    <div>
        <div class="tongji">

            <div class="top">

                <!-- <div class="logo">
                    <img src="../assets/img/tongjilogo.png">
                </div> -->
                <div class="title">
                    <span>大数据分析后台管理</span>
                </div>

            </div>
            
            <div class="bottom">

               

                <div class="middle">
                    <div class="content">

                        <div class="top-details">
                            <div class="tab">
                                <span class="title">客户累计总数</span>
                                <span class="num">{{zongshu[0].value}}</span>
                            </div>
                            <div class="tab">
                                <span class="title">常年顾问数（累计）</span>
                                <span class="num">{{zongshu[1].value}}</span>
                            </div>
                            <div class="tab">
                                <span class="title">常年顾问数（活跃）</span>
                                <span class="num">{{zongshu[2].vlaue}}</span>
                               
                            </div>
                            
                        </div>
                        
                        
                    </div>
                    <div class="biaoti">客户类型</div>

                    <div class="quanbu">
                        <div class="kuai">
                            <div class="top">
                                <span>政府</span>
                                <span>数量：{{leixin[0].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in list1.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(leixin[0].parameter,'客户类型','政府')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>外国客户</span>
                                <span>数量：{{leixin[1].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in list2.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(leixin[1].parameter,'客户类型','外国客户')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>重点国企</span>
                                <span>数量：{{leixin[2].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in list3.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(leixin[2].parameter,'客户类型','重点国企')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>重点民营</span>
                                <span>数量：{{leixin[3].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in list4.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(leixin[3].parameter,'客户类型','重点民营')">查看更多</div>
                            </div>
                        </div>

                        
                    </div>

                    <div class="biaoti">行业类型</div>

                    <div class="quanbu">
                        <div class="kuai">
                            <div class="top">
                                <span>金融业客户</span>
                                <span>数量：{{kehuleixin[0].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in kehutype1.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(kehuleixin[0].parameter,'行业类型','金融业客户')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>房地产业客户</span>
                                <span>数量：{{kehuleixin[1].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in kehutype2.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(kehuleixin[1].parameter,'行业类型','房地产业客户')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>建筑业客户</span>
                                <span>数量：{{kehuleixin[2].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in kehutype3.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(kehuleixin[2].parameter,'行业类型','建筑业客户')">查看更多</div>
                            </div>
                        </div>

                        <div class="kuai">
                            <div class="top">
                                <span>互联网行业客户</span>
                                <span>数量：{{kehuleixin[3].value}}</span>
                            </div>
                            <div class="listneirong">
                                <div v-for="vo in kehutype4.data" :key="vo.Id">{{vo.Customer_Name_Zh}}</div>
                                
                            </div>
                            <div class="gengduo">
                                <div class="anniu" @click="chakan(kehuleixin[3].parameter,'行业类型','互联网行业客户')">查看更多</div>
                            </div>
                        </div>

                        
                    </div>

                </div>
                <!-- 右侧 -->

                

                    
        

                
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
export default {
    props: {
   
    },
    data(){
        return{
            
            zongshu:"",
            leixin:'',
            list1:'',
            list2:'',
            list3:'',
            list4:'',

            kehuleixin:'',
            kehutype1:'',
            kehutype2:'',
            kehutype3:'',
            kehutype4:''
        }  
    },
    
    methods:{
        // getStatisticsnumber(){
        //     this.$http.post('/yongxu/Statistics/getStatisticsnumber',qs.stringify({orgId:this.orgId})).then((res)=>{
        //         this.zongshu = res.data
        //     })
        // },
        getclientStatistics(){
            this.$http.post('/yongxu/Statistics/clientStatistics',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.zongshu = res.data
            })
        },
        getclientIndustrytype(){
            this.$http.post('/yongxu/Statistics/clientIndustrytype',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.kehuleixin = res.data
            })
        },
        getclientTypestatistics(){
            this.$http.post('/yongxu/Statistics/clientTypestatistics',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.leixin = res.data
            })
        },
        getclientTypelist(){
            this.$http.post('/yongxu/Statistics/clientTypelist',qs.stringify({parameter:1,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.list1 = res.data
            })
        },
        getclientTypelist1(){
            this.$http.post('/yongxu/Statistics/clientTypelist',qs.stringify({parameter:2,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.list2 = res.data
            })
        },
        getclientTypelist2(){
            this.$http.post('/yongxu/Statistics/clientTypelist',qs.stringify({parameter:3,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.list3 = res.data
            })
        },
        getclientTypelist3(){
            this.$http.post('/yongxu/Statistics/clientTypelist',qs.stringify({parameter:4,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.list4 = res.data
            })
        },

        getclientIndustrytypename(){
            this.$http.post('/yongxu/Statistics/clientIndustrytypename',qs.stringify({parameter:486,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.kehutype1 = res.data
            })
        },
        getclientIndustrytypename1(){
            this.$http.post('/yongxu/Statistics/clientIndustrytypename',qs.stringify({parameter:487,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.kehutype2 = res.data
            })
        },
        getclientIndustrytypename2(){
            this.$http.post('/yongxu/Statistics/clientIndustrytypename',qs.stringify({parameter:481,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.kehutype3 = res.data
            })
        },
        getclientIndustrytypename3(){
            this.$http.post('/yongxu/Statistics/clientIndustrytypename',qs.stringify({parameter:485,Display_Page_Number:10,PageNumber:1})).then((res)=>{
                this.kehutype4 = res.data
            })
        },
        chakan(id,type,title){
            this.$router.push({path: '/index/tongjicontent?id=' + id + '&type=' + type + '&title=' + title})
        }
    },
    created(){
        this.getclientStatistics()
        this.getclientTypestatistics()
        this.getclientTypelist()
        this.getclientTypelist1()
        this.getclientTypelist2()
        this.getclientTypelist3()


        this.getclientIndustrytype()
        this.getclientIndustrytypename()
        this.getclientIndustrytypename1()
        this.getclientIndustrytypename2()
        this.getclientIndustrytypename3()

        
    },
    mounted(){
        
    },
    computed:{
        
    },
    components:{
       
    }
    
}
</script>

<style lang="scss" scoped>

.tongji{
    width: 100%;
    background: #000024;
    
}
.top{
    width: 100%;
    height: calc(10vh);
    display: flex;
    flex-direction:row;
    justify-content:center;
    .logo{
        position: fixed;
        top:15px;
        left: 30px;
        width: 80px;
        height: 80px;
        img{
            width: 80px;
            height: 80px;
        }
    }
    .title{

        span{
            display: block;
            font-size: 22px;
            color:#3ED9D1;
            line-height: calc(10vh);
            letter-spacing: 15px;
            padding:0 30px;
            background: url(../assets/img/444.png) no-repeat center center;
            background-size: 100%;
            width: 450px;
            text-align: center;
        }
    }
}
.bottom{
    width: 100%;
    // height: calc(90vh);
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    box-sizing: border-box;
    .left{
        height: calc(90vh);
        width: 35%;
        padding:10px;
        box-sizing: border-box;
        .content{
            background: #29323B;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                text-align: center;
                padding-top:3vh;
                letter-spacing: 5px;
            }
            .title-tab{
                padding:0 20px;
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-direction:row;
                justify-content:space-around;
                color:#fff;
                margin-top:20px;
                font-size: 14px;
                div{
                    width: 50px;
                    text-align: center;
                }
            }
            .anli-list{
                padding:0 20px;
                .list{
                    background: #343C45;
                    display: flex;
                    flex-direction:row;
                    justify-content:space-around;
                    color:#fff;
                    padding:7px 0;
                    border-radius: 5px;
                    margin-top:10px;
                    div{
                        width: 90px;
                        text-align: center;
                    }
                }
            }
        }
    }
    // 左侧
    .middle{
        // height: calc(90vh);
        flex-grow:1;
        padding:10px;
        box-sizing: border-box;
        margin-bottom:10px;
        .top-details{
            width: 100%;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .tab{
                width: 33%;
                height: 13vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:17px;
                }

            }
            .tab:nth-child(1){
                background: #2C62E6;
            }
            .tab:nth-child(2){
                background: #0DD396;
            }
            .tab:nth-child(3){
                background: #F19149;
                p{
                    display: block;
                    width: 50%;
                    float: left;
                    color:#fff
                }
                p:nth-child(2){
                    text-align: right;
                }
            }
            .tab:nth-child(4){
                background: #FE5E80;
            }
        }
        .biaoti{
            width: 100%;
            color: #fff;
            margin-top:15px;
        }
        .quanbu{
            display: flex;
            flex-direction:row;
            justify-content: flex-start;
            margin-bottom:10px;
        }
        .kuai{
            background: #29323B;
            width: 20%;
            height: 500px;
            border-radius: 10px;
            margin-right:10px;
            margin-top:10px;
            position: relative;
            .top{
               border-bottom:1px solid #585656;
               width: 100%;
               height: 50px;
               display: flex;
                flex-direction:row;
                justify-content: space-between;
                padding: 0 10px;
                box-sizing: border-box;
                align-items:center;
               span:nth-child(1){
                   color:#3ED9D1
               }
               span:nth-child(2){
                   color:#fff
               }
            }
            .listneirong{
                display: flex;
                flex-direction:column;
                color:#fff;
                padding: 10px 10px;
                div{
                    margin-bottom:10px;
                }
            }
            .gengduo{
                width: 100%;
                position: absolute;
                bottom:0px;
                left: 0px;
                height: 40px;
                display: flex;
                justify-content:center;
                .anniu{
                    color:#fff;
                    background: #394148;
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                    cursor: pointer;
                }
                .anniu:hover{
                    color:#fff;
                    background: #2C62E6;
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 5px;
                }
            }
        }
        .kuai:nth-child(5){
            background: #29323B;
            width: 20%;
            height: 500px;
            border-radius: 10px;
            margin-right:0;
            margin-top:10px;
        }
    }
    // 中间
    .right{
        width: 25%;
        padding:10px;
        box-sizing: border-box;
        height: calc(90vh);
        .notice{
            height: 10vh;
            background: #29323B;
            border-radius: 5px;
            padding:5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 6vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:space-between;
                    margin-bottom:1vh;
                }
            }
        }
        // 公告
        .dynamic{
            height: 24vh;
            margin-top: 2vh;
            background: #29323B;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                margin-top:1vh;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 16vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:flex-start;
                    margin-bottom:1vh;
                    div{
                        margin-right:2vh;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    div:nth-child(1){
                        width: 20%;
                    }
                    div:nth-child(2){
                        width: 60%;
                    }
                    div:nth-child(3){
                        width: 20%;
                    }
                }
            }
        }
        // 动态
    }
}


.charts{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    .charts-content{
        width: 49%;
        height: 24vh;
        margin-top:2vh;
        
        box-sizing: border-box;
    }
    .charts-pa{
        background: #29323B;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        position: relative;
        .title{
            color:#3ED9D1;
            font-size: 18px;
            position: absolute;
            top:10px;
        }
        .echartDiv{
            margin:0 auto;
        }
    }
}


// 29323B
</style>

